<!--
  智慧社区管理系统 - 停车位管理 (静态展示页面)
  @author Wu.Liang
  @date 2024-01-01
-->
<template>
    <div class="space-container">
        <!-- 页面标题 -->
        <el-card class="title-card">
            <div class="page-header">
                <h2>🚗 车位管理</h2>
                <p class="page-description">管理社区内所有停车位信息，包括车位分配、状态监控、批量操作等功能</p>
            </div>
        </el-card>

        <!-- 搜索区域 -->
        <el-card class="search-card">
            <el-form :model="searchForm" inline>
                <el-form-item label="停车场">
                    <el-select v-model="searchForm.lotId" placeholder="请选择停车场" clearable>
                        <el-option
                            v-for="lot in parkingLots"
                            :key="lot.id"
                            :label="lot.lotName"
                            :value="lot.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="车位号">
                    <el-input v-model="searchForm.spaceNo" placeholder="请输入车位号" clearable />
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
                        <el-option label="空闲" :value="0" />
                        <el-option label="占用" :value="1" />
                        <el-option label="维护" :value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch">搜索</el-button>
                    <el-button @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 统计信息卡片 -->
        <el-row :gutter="20" class="stats-row">
            <el-col :span="6">
                <el-card class="stats-card">
                    <div class="stats-content">
                        <div class="stats-icon success">
                            <el-icon><CircleCheck /></el-icon>
                        </div>
                        <div class="stats-info">
                            <div class="stats-number">{{ stats.total }}</div>
                            <div class="stats-label">总车位数</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="stats-card">
                    <div class="stats-content">
                        <div class="stats-icon primary">
                            <el-icon><Parking /></el-icon>
                        </div>
                        <div class="stats-info">
                            <div class="stats-number">{{ stats.available }}</div>
                            <div class="stats-label">空闲车位</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="stats-card">
                    <div class="stats-content">
                        <div class="stats-icon danger">
                            <el-icon><CircleCheck /></el-icon>
                        </div>
                        <div class="stats-info">
                            <div class="stats-number">{{ stats.occupied }}</div>
                            <div class="stats-label">占用车位</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="stats-card">
                    <div class="stats-content">
                        <div class="stats-icon warning">
                            <el-icon><Tools /></el-icon>
                        </div>
                        <div class="stats-info">
                            <div class="stats-number">{{ stats.maintenance }}</div>
                            <div class="stats-label">维护车位</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 操作区域 -->
        <el-card class="operation-card">
            <el-button type="primary" @click="handleAdd">添加车位</el-button>
            <el-button type="success" @click="handleBatchAdd">批量添加</el-button>
            <el-button type="warning" @click="handleRefresh">刷新</el-button>
            <el-button type="info" @click="handleExport">导出数据</el-button>
        </el-card>

        <!-- 数据表格 -->
        <el-card class="table-card">
            <el-table :data="filteredTableData" border v-loading="loading" stripe>
                <el-table-column prop="id" label="ID" width="80" />
                <el-table-column prop="spaceNo" label="车位号" width="120" />
                <el-table-column prop="lotName" label="所属停车场" />
                <el-table-column prop="spaceTypeName" label="车位类型" width="100" />
                <el-table-column prop="statusName" label="状态" width="100">
                    <template #default="{ row }">
                        <el-tag :type="getStatusType(row.status)">{{ row.statusName }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="licensePlate" label="车牌号" width="120" />
                <el-table-column prop="ownerName" label="车主姓名" width="100" />
                <el-table-column prop="phone" label="联系电话" width="120" />
                <el-table-column prop="createTime" label="创建时间" width="180" />
                <el-table-column label="操作" width="200" fixed="right">
                    <template #default="{ row }">
                        <el-button type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
                        <el-button type="success" size="small" @click="handleAssign(row)" v-if="row.status === 0">分配</el-button>
                        <el-button type="warning" size="small" @click="handleRelease(row)" v-if="row.status === 1">释放</el-button>
                        <el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-container">
                <el-pagination
                    v-model:current-page="pagination.current"
                    v-model:page-size="pagination.size"
                    :page-sizes="[10, 20, 50, 100]"
                    :total="pagination.total"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </el-card>

        <!-- 添加/编辑对话框 -->
        <el-dialog
            v-model="dialogVisible"
            :title="dialogTitle"
            width="500px"
            @close="handleDialogClose"
        >
            <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
                <el-form-item label="停车场" prop="lotId">
                    <el-select v-model="form.lotId" placeholder="请选择停车场" style="width: 100%">
                        <el-option
                            v-for="lot in parkingLots"
                            :key="lot.id"
                            :label="lot.lotName"
                            :value="lot.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="车位号" prop="spaceNo">
                    <el-input v-model="form.spaceNo" placeholder="请输入车位号" />
                </el-form-item>
                <el-form-item label="车位类型" prop="spaceType">
                    <el-select v-model="form.spaceType" placeholder="请选择车位类型" style="width: 100%">
                        <el-option label="普通车位" :value="1" />
                        <el-option label="充电车位" :value="2" />
                        <el-option label="无障碍车位" :value="3" />
                        <el-option label="访客车位" :value="4" />
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-select v-model="form.status" placeholder="请选择状态" style="width: 100%">
                        <el-option label="空闲" :value="0" />
                        <el-option label="占用" :value="1" />
                        <el-option label="维护" :value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="form.remark" type="textarea" placeholder="请输入备注信息" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
            </template>
        </el-dialog>

        <!-- 批量添加对话框 -->
        <el-dialog
            v-model="batchDialogVisible"
            title="批量添加车位"
            width="500px"
        >
            <el-form :model="batchForm" :rules="batchRules" ref="batchFormRef" label-width="100px">
                <el-form-item label="停车场" prop="lotId">
                    <el-select v-model="batchForm.lotId" placeholder="请选择停车场" style="width: 100%">
                        <el-option
                            v-for="lot in parkingLots"
                            :key="lot.id"
                            :label="lot.lotName"
                            :value="lot.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="起始车位号" prop="startSpaceNo">
                    <el-input v-model="batchForm.startSpaceNo" placeholder="请输入起始车位号" />
                </el-form-item>
                <el-form-item label="结束车位号" prop="endSpaceNo">
                    <el-input v-model="batchForm.endSpaceNo" placeholder="请输入结束车位号" />
                </el-form-item>
                <el-form-item label="车位类型" prop="spaceType">
                    <el-select v-model="batchForm.spaceType" placeholder="请选择车位类型" style="width: 100%">
                        <el-option label="普通车位" :value="1" />
                        <el-option label="充电车位" :value="2" />
                        <el-option label="无障碍车位" :value="3" />
                        <el-option label="访客车位" :value="4" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="batchDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleBatchSubmit" :loading="submitLoading">确定</el-button>
            </template>
        </el-dialog>

        <!-- 分配车位对话框 -->
        <el-dialog
            v-model="assignDialogVisible"
            title="分配车位"
            width="400px"
        >
            <el-form :model="assignForm" :rules="assignRules" ref="assignFormRef" label-width="100px">
                <el-form-item label="车牌号" prop="licensePlate">
                    <el-input v-model="assignForm.licensePlate" placeholder="请输入车牌号" />
                </el-form-item>
                <el-form-item label="车主姓名" prop="ownerName">
                    <el-input v-model="assignForm.ownerName" placeholder="请输入车主姓名" />
                </el-form-item>
                <el-form-item label="联系电话" prop="phone">
                    <el-input v-model="assignForm.phone" placeholder="请输入联系电话" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="assignDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleAssignSubmit" :loading="submitLoading">确定</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { CircleCheck, Tools } from '@element-plus/icons-vue'
import { showSuccess, showError } from '@/utils/message'

// 响应式数据
const loading = ref(false)
const submitLoading = ref(false)
const dialogVisible = ref(false)
const batchDialogVisible = ref(false)
const assignDialogVisible = ref(false)
const dialogTitle = ref('')
const formRef = ref<FormInstance>()
const batchFormRef = ref<FormInstance>()
const assignFormRef = ref<FormInstance>()

// 静态数据 - 停车场列表
const parkingLots = ref([
    { id: 1, lotName: 'A区地下停车场' },
    { id: 2, lotName: 'B区地面停车场' },
    { id: 3, lotName: 'C区立体车库' },
    { id: 4, lotName: '访客专用停车场' }
])

// 静态数据 - 车位列表
const tableData = ref([
    {
        id: 1,
        spaceNo: 'A-001',
        lotId: 1,
        lotName: 'A区地下停车场',
        spaceType: 1,
        spaceTypeName: '普通车位',
        status: 0,
        statusName: '空闲',
        licensePlate: '',
        ownerName: '',
        phone: '',
        createTime: '2024-01-15 10:30:00',
        remark: ''
    },
    {
        id: 2,
        spaceNo: 'A-002',
        lotId: 1,
        lotName: 'A区地下停车场',
        spaceType: 1,
        spaceTypeName: '普通车位',
        status: 1,
        statusName: '占用',
        licensePlate: '京A12345',
        ownerName: '张三',
        phone: '13800138001',
        createTime: '2024-01-15 10:30:00',
        remark: ''
    },
    {
        id: 3,
        spaceNo: 'A-003',
        lotId: 1,
        lotName: 'A区地下停车场',
        spaceType: 2,
        spaceTypeName: '充电车位',
        status: 0,
        statusName: '空闲',
        licensePlate: '',
        ownerName: '',
        phone: '',
        createTime: '2024-01-15 10:30:00',
        remark: '支持快充'
    },
    {
        id: 4,
        spaceNo: 'A-004',
        lotId: 1,
        lotName: 'A区地下停车场',
        spaceType: 3,
        spaceTypeName: '无障碍车位',
        status: 1,
        statusName: '占用',
        licensePlate: '京B67890',
        ownerName: '李四',
        phone: '13800138002',
        createTime: '2024-01-15 10:30:00',
        remark: '无障碍设施完善'
    },
    {
        id: 5,
        spaceNo: 'B-001',
        lotId: 2,
        lotName: 'B区地面停车场',
        spaceType: 1,
        spaceTypeName: '普通车位',
        status: 0,
        statusName: '空闲',
        licensePlate: '',
        ownerName: '',
        phone: '',
        createTime: '2024-01-15 10:30:00',
        remark: ''
    },
    {
        id: 6,
        spaceNo: 'B-002',
        lotId: 2,
        lotName: 'B区地面停车场',
        spaceType: 1,
        spaceTypeName: '普通车位',
        status: 2,
        statusName: '维护',
        licensePlate: '',
        ownerName: '',
        phone: '',
        createTime: '2024-01-15 10:30:00',
        remark: '地面维修中'
    },
    {
        id: 7,
        spaceNo: 'C-001',
        lotId: 3,
        lotName: 'C区立体车库',
        spaceType: 1,
        spaceTypeName: '普通车位',
        status: 1,
        statusName: '占用',
        licensePlate: '京C11111',
        ownerName: '王五',
        phone: '13800138003',
        createTime: '2024-01-15 10:30:00',
        remark: ''
    },
    {
        id: 8,
        spaceNo: 'C-002',
        lotId: 3,
        lotName: 'C区立体车库',
        spaceType: 2,
        spaceTypeName: '充电车位',
        status: 1,
        statusName: '占用',
        licensePlate: '京C22222',
        ownerName: '赵六',
        phone: '13800138004',
        createTime: '2024-01-15 10:30:00',
        remark: '慢充车位'
    },
    {
        id: 9,
        spaceNo: 'V-001',
        lotId: 4,
        lotName: '访客专用停车场',
        spaceType: 4,
        spaceTypeName: '访客车位',
        status: 0,
        statusName: '空闲',
        licensePlate: '',
        ownerName: '',
        phone: '',
        createTime: '2024-01-15 10:30:00',
        remark: '临时停车'
    },
    {
        id: 10,
        spaceNo: 'V-002',
        lotId: 4,
        lotName: '访客专用停车场',
        spaceType: 4,
        spaceTypeName: '访客车位',
        status: 1,
        statusName: '占用',
        licensePlate: '京V33333',
        ownerName: '访客',
        phone: '13900139001',
        createTime: '2024-01-15 10:30:00',
        remark: '临时停车'
    }
])

// 统计信息
const stats = computed(() => {
    const total = tableData.value.length
    const available = tableData.value.filter(item => item.status === 0).length
    const occupied = tableData.value.filter(item => item.status === 1).length
    const maintenance = tableData.value.filter(item => item.status === 2).length
    
    return { total, available, occupied, maintenance }
})

// 分页
const pagination = reactive({
    current: 1,
    size: 10,
    total: 0
})

// 搜索表单
const searchForm = reactive({
    lotId: null,
    spaceNo: '',
    status: null
})

// 表单数据
const form = reactive({
    id: null,
    lotId: null,
    spaceNo: '',
    spaceType: 1,
    status: 0,
    remark: ''
})

// 批量添加表单
const batchForm = reactive({
    lotId: null,
    startSpaceNo: '',
    endSpaceNo: '',
    spaceType: 1
})

// 分配表单
const assignForm = reactive({
    spaceId: null,
    licensePlate: '',
    ownerName: '',
    phone: ''
})

// 表单验证规则
const rules: FormRules = {
    lotId: [{ required: true, message: '请选择停车场', trigger: 'change' }],
    spaceNo: [{ required: true, message: '请输入车位号', trigger: 'blur' }],
    spaceType: [{ required: true, message: '请选择车位类型', trigger: 'change' }],
    status: [{ required: true, message: '请选择状态', trigger: 'change' }]
}

const batchRules: FormRules = {
    lotId: [{ required: true, message: '请选择停车场', trigger: 'change' }],
    startSpaceNo: [{ required: true, message: '请输入起始车位号', trigger: 'blur' }],
    endSpaceNo: [{ required: true, message: '请输入结束车位号', trigger: 'blur' }],
    spaceType: [{ required: true, message: '请选择车位类型', trigger: 'change' }]
}

const assignRules: FormRules = {
    licensePlate: [{ required: true, message: '请输入车牌号', trigger: 'blur' }],
    ownerName: [{ required: true, message: '请输入车主姓名', trigger: 'blur' }],
    phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }]
}

// 过滤后的表格数据
const filteredTableData = computed(() => {
    let filtered = [...tableData.value]
    
    if (searchForm.lotId) {
        filtered = filtered.filter(item => item.lotId === searchForm.lotId)
    }
    
    if (searchForm.spaceNo) {
        filtered = filtered.filter(item => item.spaceNo.includes(searchForm.spaceNo))
    }
    
    if (searchForm.status !== null) {
        filtered = filtered.filter(item => item.status === searchForm.status)
    }
    
    // 更新分页总数
    pagination.total = filtered.length
    
    // 分页处理
    const start = (pagination.current - 1) * pagination.size
    const end = start + pagination.size
    return filtered.slice(start, end)
})

// 获取状态类型
const getStatusType = (status: number) => {
    switch (status) {
        case 0: return 'success'
        case 1: return 'danger'
        case 2: return 'warning'
        default: return 'info'
    }
}

// 搜索
const handleSearch = () => {
    pagination.current = 1
    showSuccess('搜索完成')
}

// 重置
const handleReset = () => {
    Object.assign(searchForm, {
        lotId: null,
        spaceNo: '',
        status: null
    })
    pagination.current = 1
    showSuccess('重置完成')
}

// 刷新
const handleRefresh = () => {
    showSuccess('数据已刷新')
}

// 导出数据
const handleExport = () => {
    showSuccess('数据导出功能演示 - 实际开发中会生成Excel文件')
}

// 添加
const handleAdd = () => {
    dialogTitle.value = '添加车位'
    Object.assign(form, {
        id: null,
        lotId: null,
        spaceNo: '',
        spaceType: 1,
        status: 0,
        remark: ''
    })
    dialogVisible.value = true
}

// 编辑
const handleEdit = (row: any) => {
    dialogTitle.value = '编辑车位'
    Object.assign(form, row)
    dialogVisible.value = true
}

// 删除
const handleDelete = async (row: any) => {
    try {
        await ElMessageBox.confirm('确定要删除该车位吗？', '提示', {
            type: 'warning'
        })
        
        // 模拟删除操作
        const index = tableData.value.findIndex(item => item.id === row.id)
        if (index > -1) {
            tableData.value.splice(index, 1)
            showSuccess('删除成功')
        }
    } catch (error) {
        if (error !== 'cancel') {
            showError('删除失败')
        }
    }
}

// 批量添加
const handleBatchAdd = () => {
    Object.assign(batchForm, {
        lotId: null,
        startSpaceNo: '',
        endSpaceNo: '',
        spaceType: 1
    })
    batchDialogVisible.value = true
}

// 分配车位
const handleAssign = (row: any) => {
    assignForm.spaceId = row.id
    assignForm.licensePlate = ''
    assignForm.ownerName = ''
    assignForm.phone = ''
    assignDialogVisible.value = true
}

// 释放车位
const handleRelease = async (row: any) => {
    try {
        await ElMessageBox.confirm('确定要释放该车位吗？', '提示', {
            type: 'warning'
        })
        
        // 模拟释放操作
        const item = tableData.value.find(item => item.id === row.id)
        if (item) {
            item.status = 0
            item.statusName = '空闲'
            item.licensePlate = ''
            item.ownerName = ''
            item.phone = ''
            showSuccess('释放成功')
        }
    } catch (error) {
        if (error !== 'cancel') {
            showError('释放失败')
        }
    }
}

// 提交表单
const handleSubmit = async () => {
    if (!formRef.value) return
    
    try {
        await formRef.value.validate()
        submitLoading.value = true
        
        // 模拟提交操作
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        if (form.id) {
            // 编辑模式
            const index = tableData.value.findIndex(item => item.id === form.id)
            if (index > -1) {
                Object.assign(tableData.value[index], form)
            }
            showSuccess('更新成功')
        } else {
            // 添加模式
            const newId = Math.max(...tableData.value.map(item => item.id)) + 1
            const lot = parkingLots.value.find(lot => lot.id === form.lotId)
            const newSpace = {
                ...form,
                id: newId,
                lotName: lot?.lotName || '',
                spaceTypeName: getSpaceTypeName(form.spaceType),
                statusName: getStatusName(form.status),
                licensePlate: '',
                ownerName: '',
                phone: '',
                createTime: new Date().toLocaleString()
            }
            tableData.value.push(newSpace)
            showSuccess('添加成功')
        }
        
        dialogVisible.value = false
    } catch (error) {
        showError('提交失败')
    } finally {
        submitLoading.value = false
    }
}

// 批量提交
const handleBatchSubmit = async () => {
    if (!batchFormRef.value) return
    
    try {
        await batchFormRef.value.validate()
        submitLoading.value = true
        
        // 模拟批量添加操作
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        const startNo = parseInt(batchForm.startSpaceNo)
        const endNo = parseInt(batchForm.endSpaceNo)
        const lot = parkingLots.value.find(lot => lot.id === batchForm.lotId)
        
        for (let i = startNo; i <= endNo; i++) {
            const newId = Math.max(...tableData.value.map(item => item.id)) + 1
            const newSpace = {
                id: newId,
                spaceNo: `${lot?.lotName?.charAt(0)}-${i.toString().padStart(3, '0')}`,
                lotId: batchForm.lotId,
                lotName: lot?.lotName || '',
                spaceType: batchForm.spaceType,
                spaceTypeName: getSpaceTypeName(batchForm.spaceType),
                status: 0,
                statusName: '空闲',
                licensePlate: '',
                ownerName: '',
                phone: '',
                createTime: new Date().toLocaleString(),
                remark: ''
            }
            tableData.value.push(newSpace)
        }
        
        showSuccess(`批量添加成功，共添加 ${endNo - startNo + 1} 个车位`)
        batchDialogVisible.value = false
    } catch (error) {
        showError('批量添加失败')
    } finally {
        submitLoading.value = false
    }
}

// 分配提交
const handleAssignSubmit = async () => {
    if (!assignFormRef.value) return
    
    try {
        await assignFormRef.value.validate()
        submitLoading.value = true
        
        // 模拟分配操作
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        const item = tableData.value.find(item => item.id === assignForm.spaceId)
        if (item) {
            item.status = 1
            item.statusName = '占用'
            item.licensePlate = assignForm.licensePlate
            item.ownerName = assignForm.ownerName
            item.phone = assignForm.phone
            showSuccess('分配成功')
        }
        
        assignDialogVisible.value = false
    } catch (error) {
        showError('分配失败')
    } finally {
        submitLoading.value = false
    }
}

// 对话框关闭
const handleDialogClose = () => {
    if (formRef.value) {
        formRef.value.resetFields()
    }
}

// 分页大小改变
const handleSizeChange = (size: number) => {
    pagination.size = size
    pagination.current = 1
}

// 当前页改变
const handleCurrentChange = (current: number) => {
    pagination.current = current
}

// 获取车位类型名称
const getSpaceTypeName = (type: number) => {
    switch (type) {
        case 1: return '普通车位'
        case 2: return '充电车位'
        case 3: return '无障碍车位'
        case 4: return '访客车位'
        default: return '普通车位'
    }
}

// 获取状态名称
const getStatusName = (status: number) => {
    switch (status) {
        case 0: return '空闲'
        case 1: return '占用'
        case 2: return '维护'
        default: return '空闲'
    }
}

// 初始化
onMounted(() => {
    pagination.total = tableData.value.length
})
</script>

<style scoped>
.space-container {
    padding: 20px;
}

.title-card {
    margin-bottom: 20px;
}

.page-header {
    text-align: center;
}

.page-header h2 {
    margin: 0 0 10px 0;
    color: #303133;
    font-size: 24px;
}

.page-description {
    margin: 0;
    color: #909399;
    font-size: 14px;
}

.search-card {
    margin-bottom: 20px;
}

.stats-row {
    margin-bottom: 20px;
}

.stats-card {
    height: 100px;
}

.stats-content {
    display: flex;
    align-items: center;
    height: 100%;
}

.stats-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    font-size: 24px;
    color: white;
}

.stats-icon.success {
    background: linear-gradient(135deg, #67c23a, #85ce61);
}

.stats-icon.primary {
    background: linear-gradient(135deg, #409eff, #66b1ff);
}

.stats-icon.danger {
    background: linear-gradient(135deg, #f56c6c, #f78989);
}

.stats-icon.warning {
    background: linear-gradient(135deg, #e6a23c, #ebb563);
}

.stats-info {
    flex: 1;
}

.stats-number {
    font-size: 28px;
    font-weight: bold;
    color: #303133;
    margin-bottom: 5px;
}

.stats-label {
    font-size: 14px;
    color: #909399;
}

.operation-card {
    margin-bottom: 20px;
}

.table-card {
    margin-bottom: 20px;
}

.pagination-container {
    margin-top: 20px;
    text-align: right;
}
</style>
